<template>
  <div class="login-container nav-bar-top">
    <van-nav-bar class="nav-bar" title="登录" left-arrow @click-left="$router.back()"/>
    <div class="login-tab">
      <van-tabs v-model="active">
        <van-tab title="手机登录">
          <van-form
            :show-error="false"
            :show-error-message="false"
            @submit="loginByCode"
            @failed="failed">
            <van-field
              v-model="loginAccount"
              type="tel"
              label="手机号"
              placeholder="请输入手机号码"
              :rules="[{ required: true, message: '手机号格式错误', validator: phoneCheck }]"
            />
            <van-field
              v-model="loginCode"
              center
              clearable
              label="验证码"
              placeholder="请输入短信验证码"
              :rules="[{ required: true, message: '请输入短信验证码' }]"
            >
              <template #button>
                <van-button @click.prevent="sendCode" class="code-btn" size="small" type="primary">发送验证码</van-button>
              </template>
            </van-field>
            <div  class="login-btn">
              <van-button :loading="loginBtnLoading" round block type="info" native-type="submit">
                登录
              </van-button>
            </div>
          </van-form>
        </van-tab>
        <van-tab title="密码登录">
          <van-form
            :show-error="false"
            :show-error-message="false"
            @submit="loginByPassword"
            @failed="failed">
            <van-field
              v-model="loginAccount"
              type="tel"
              label="手机号"
              placeholder="请输入手机号码"
              :rules="[{ required: true, message: '手机号格式错误', validator: phoneCheck }]"
            />
            <van-field
              v-model="loginPassword"
              type="password"
              name="密码"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请输入密码' }]"
            />
            <div class="login-btn">
              <van-button :loading="loginBtnLoading" block native-type="submit">
                登录
              </van-button>
            </div>
          </van-form>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import userApi from '@/api/userApi'
import constants from '@/config/constants'

export default {
  name: 'login',
  data () {
    return {
      active: 0,
      loginBtnLoading: false,

      /* 登录账号信息 */
      loginAccount: '13000000000',
      loginPassword: '123456',
      loginCode: '',
    }
  },
  methods: {
    /* 验证码登录 */
    async loginByCode () {
      this.$toast.fail("暂不支持");
    },
    /* 密码登录 */
    async loginByPassword () {
      this.loginBtnLoading = true;
      this.$toast.loading("登录中...");
      const result = await userApi.login({
        accountType: '0',
        loginAccount: this.loginAccount,
        loginPassword: this.loginPassword
      })
      this.loginBtnLoading = false;
			if(result.code == constants.SUCCESS){
				setTimeout(()=>{
				  this.$store.commit(constants.STORE.SET_TOKEN, {
				    "id": result.data.memberInfo.id,
				    "token": result.data.token
				  });
				  this.$toast.success("登录成功");
				  this.$router.back();
				}, 500);
			}
    },
    /* 表单校验失败 */
    failed (errorInfo) {
      this.$toast.fail({message: errorInfo.errors[0].message, duration: 1000});
    },
    /* 手机号码校验 */
    phoneCheck (value) {
      var phoneRule = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
      if(phoneRule.test(value)){
        return true;
      }else{
        return false;
      }
    },
    /* 发送验证码 */
    sendCode () {
      this.$toast.fail("暂不支持");
    }
  }
}
</script>

<style lang="scss">
.login-container{
  padding-top: 5px;
  .login-tab{
    margin: 0 10px;
    padding: 5px;
    background: #fff;
    border-radius: 10px;
  }
  /deep/ .van-cell{
    padding: 10px 10px;
    .van-field__label{
      width: 60px;
    }
    .van-cell__title{
      display: flex;
      align-items: center;
      height: 30px;
    }
    .van-cell__value{
      display: flex;
      align-items: center;
      height: 30px;
    }
  }
  /deep/ .login-btn{
    margin: 15px 5px 10px 5px;
  }
  /deep/ .code-btn{
    height: 30px;
  }
  /deep/ .van-tabs__line{
    width: 60px;
    height: 2px;
    background-color: #e9b461;
  }
}
</style>
